<template>
  <div class="alert-detail">
    <el-descriptions border :column="{ xs: 1, sm: 2, md: 2, lg: 3, xl: 3 }" :title="'告警基本信息'">
      <el-descriptions-item label="告警ID">{{ alert.id }}</el-descriptions-item>
      <el-descriptions-item label="告警类型">{{ getAlertTypeText(alert.type) }}</el-descriptions-item>
      <el-descriptions-item label="严重程度">{{ getSeverityText(alert.severity) }}</el-descriptions-item>
      <el-descriptions-item label="发生时间">{{ formatDateTime(alert.timestamp) }}</el-descriptions-item>
      <el-descriptions-item label="当前状态">{{ getStatusText(alert.status) }}</el-descriptions-item>
      <el-descriptions-item label="置信度" v-if="alert.confidence !== undefined">
        <el-progress :percentage="(alert.confidence * 100).toFixed(0)" :status="getConfidenceStatus(alert.confidence)" />
      </el-descriptions-item>
    </el-descriptions>

    <div class="section" v-if="alert.cameraId || alert.location">
      <h3 class="section-title">监控信息</h3>
      <el-descriptions border :column="{ xs: 1, sm: 2, md: 2 }">
        <el-descriptions-item label="摄像头ID" v-if="alert.cameraId">{{ alert.cameraId }}</el-descriptions-item>
        <el-descriptions-item label="摄像头名称" v-if="alert.cameraName">{{ alert.cameraName }}</el-descriptions-item>
        <el-descriptions-item label="位置信息" v-if="alert.location">{{ alert.location }}</el-descriptions-item>
        <el-descriptions-item label="坐标" v-if="alert.coordinates">{{ formatCoordinates(alert.coordinates) }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="section">
      <h3 class="section-title">告警描述</h3>
      <div class="description-content">
        {{ alert.description || '暂无详细描述' }}
      </div>
    </div>

    <div class="section" v-if="alert.imageUrl || alert.snapshot">
      <h3 class="section-title">告警截图</h3>
      <div class="image-gallery">
        <img :src="alert.imageUrl || alert.snapshot" alt="告警截图" class="detail-image">
      </div>
    </div>

    <div class="section" v-if="alert.metadata && Object.keys(alert.metadata).length > 0">
      <h3 class="section-title">检测详情</h3>
      <el-table :data="getMetadataList(alert.metadata)" border style="width: 100%">
        <el-table-column prop="key" label="属性" width="120"></el-table-column>
        <el-table-column prop="value" label="值" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="说明" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <div class="section" v-if="alert.processHistory && alert.processHistory.length > 0">
      <h3 class="section-title">处理历史</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in alert.processHistory"
          :key="index"
          :timestamp="formatDateTime(item.timestamp)"
          :type="getHistoryType(item.action)"
        >
          <div class="timeline-content">
            <div class="timeline-action">{{ getHistoryActionText(item.action) }}</div>
            <div class="timeline-operator" v-if="item.operator">操作者: {{ item.operator }}</div>
            <div class="timeline-note" v-if="item.note">{{ item.note }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>

    <div class="section" v-if="alert.resolutionInfo">
      <h3 class="section-title">解决信息</h3>
      <el-descriptions border :column="{ xs: 1, sm: 1 }">
        <el-descriptions-item label="解决时间">{{ formatDateTime(alert.resolutionInfo.timestamp) }}</el-descriptions-item>
        <el-descriptions-item label="解决人" v-if="alert.resolutionInfo.operator">{{ alert.resolutionInfo.operator }}</el-descriptions-item>
        <el-descriptions-item label="解决措施" v-if="alert.resolutionInfo.action">{{ alert.resolutionInfo.action }}</el-descriptions-item>
        <el-descriptions-item label="备注" v-if="alert.resolutionInfo.note">{{ alert.resolutionInfo.note }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  alert: {
    type: Object,
    required: true
  }
})

// 格式化日期时间
const formatDateTime = (timestamp) => {
  if (!timestamp) return '未知时间'
  
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取告警类型文本
const getAlertTypeText = (type) => {
  const typeMap = {
    'pedestrian': '行人违规',
    'vehicle': '车辆违规',
    'helmet': '未戴头盔',
    'smoke': '烟雾检测',
    'fire': '火灾检测',
    'illegal_parking': '违规停车',
    'illegal_crossing': '违规穿越',
    'overtaking': '违规超车',
    'red_light': '闯红灯'
  }
  return typeMap[type] || '未知类型'
}

// 获取严重程度文本
const getSeverityText = (severity) => {
  const severityMap = {
    'low': '低',
    'medium': '中',
    'high': '高',
    'critical': '紧急'
  }
  return severityMap[severity] || '未知'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'new': '新建',
    'unconfirmed': '待确认',
    'confirmed': '已确认',
    'ignored': '已忽略',
    'resolved': '已解决',
    'failed': '处理失败'
  }
  return statusMap[status] || '未知'
}

// 获取置信度状态
const getConfidenceStatus = (confidence) => {
  if (confidence >= 0.9) return 'success'
  if (confidence >= 0.7) return 'warning'
  return 'exception'
}

// 格式化坐标
const formatCoordinates = (coordinates) => {
  if (!coordinates || !Array.isArray(coordinates) || coordinates.length !== 2) {
    return '无效坐标'
  }
  return `${coordinates[0].toFixed(6)}, ${coordinates[1].toFixed(6)}`
}

// 获取元数据列表
const getMetadataList = (metadata) => {
  if (!metadata) return []
  
  const metadataInfo = {
    'boundingBox': { description: '检测框坐标' },
    'trackingId': { description: '跟踪ID' },
    'objectClass': { description: '物体类别' },
    'objectConfidence': { description: '物体置信度' },
    'violationDuration': { description: '违规持续时间' },
    'speed': { description: '速度' },
    'direction': { description: '方向' },
    'laneId': { description: '车道ID' },
    'plateNumber': { description: '车牌号' },
    'vehicleType': { description: '车辆类型' },
    'pedestrianCount': { description: '行人数量' },
    'vehicleCount': { description: '车辆数量' }
  }
  
  return Object.entries(metadata).map(([key, value]) => {
    const info = metadataInfo[key] || {}
    return {
      key: key,
      value: formatValue(value),
      description: info.description || ''
    }
  })
}

// 格式化值
const formatValue = (value) => {
  if (value === null || value === undefined) return '无'
  if (typeof value === 'object') return JSON.stringify(value)
  if (typeof value === 'number') {
    if (value >= 0 && value <= 1) return (value * 100).toFixed(1) + '%'
    return value.toString()
  }
  return value.toString()
}

// 获取历史记录类型
const getHistoryType = (action) => {
  const typeMap = {
    'create': 'primary',
    'confirm': 'success',
    'resolve': 'success',
    'ignore': 'warning',
    'reopen': 'danger',
    'update': 'info'
  }
  return typeMap[action] || 'info'
}

// 获取历史记录动作文本
const getHistoryActionText = (action) => {
  const actionMap = {
    'create': '告警创建',
    'confirm': '确认告警',
    'resolve': '解决告警',
    'ignore': '忽略告警',
    'reopen': '重新开启告警',
    'update': '更新告警信息'
  }
  return actionMap[action] || '未知操作'
}
</script>

<style scoped>
.alert-detail {
  padding: 20px;
}

.section {
  margin-top: 24px;
  background: #fafafa;
  padding: 16px;
  border-radius: 4px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.description-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.detail-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-content {
  font-size: 14px;
}

.timeline-action {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.timeline-operator {
  color: #606266;
  margin-bottom: 4px;
}

.timeline-note {
  color: #909399;
  font-style: italic;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .alert-detail {
    padding: 12px;
  }
  
  .section {
    margin-top: 16px;
    padding: 12px;
  }
  
  .image-gallery {
    flex-direction: column;
    align-items: center;
  }
  
  .detail-image {
    max-width: 100%;
    max-height: 300px;
  }
}
</style>